class Magnifier {
    constructor() {
        this.init();
    }

    init() {
        // 为小图添加hover事件，并且修改展示图和大图
        this.hoverImg();
        //为展示图添加各种事件
        this.handleShowImg();
    }

    hoverImg() {
        $("#imageMenu").on("mouseenter", "li", $.proxy(function(e) {
            $("#imageMenu li").removeAttr("id");
            e.currentTarget.id = "onlickImg";
            this.changeImg();
        }, this))
    }

    changeImg() {
        var src = $("#onlickImg img").attr("src");
        $("#midimg").attr("src", src);
        $("#bigView img").attr("src", src);
    }

    handleShowImg() {
        $("#vertical").mouseenter(function() {
            $("#winSelector").css("display", "block");
            $("#bigView").css("display", "block");
        });
        $("#vertical").mouseleave(function() {
            $("#winSelector").css("display", "none");
            $("#bigView").css("display", "none");
        });
        $(".mask").mousemove($.proxy(this.handleMouseMove, this));
    }

    handleMouseMove(e) {
        var x = e.offsetX - 100;
        var y = e.offsetY - 100;

        var culcMidImg = this.boundary(x, y);
        this.move(culcMidImg);
    }

    move(smallImg) {
        $("#winSelector").css({
            left: smallImg.x,
            top: smallImg.y
        })
        $("#bigView img").css({
            left: -smallImg.x * 2,
            top: -smallImg.y * 2
        })
    }

    boundary(x, y) {
        // 最小值
        x = x <= 0 ? 0 : x;
        y = y <= 0 ? 0 : y;
        // 最大值
        x = x >= 200 ? 200 : x;
        y = y >= 200 ? 200 : y;

        return {
            x: x,
            y: y
        }
    }
}